<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>02 - ol6加载百度离线地图-EPSG:4326</title>
    <script src='../lib/bd09.js'></script>
    <script src="../lib/scooper.geo.bmap-1.0.js"></script>
    <!--    <script src='../lib/ol4/ol4.js'></script>-->
    <script src='../lib/ol6.4.3/ol.js'></script>
    <link rel='stylesheet' href='../css/ol4/ol.css'>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #map {
            width: auto;
            height: 100%;
        }
    </style>
</head>
<body>
<div id='map'></div>
</body>
<script>
	window.onload = function () {
		const extent4326 = [72.004, 0.8293, 137.8347, 55.8271];
		const extentBd09 = ol.extent.applyTransform(extent4326, projTransform.ll2bmerc);
		console.log('extentBd09:', extentBd09);
		const projectionBD09 = new ol.proj.Projection({
			code: 'BD:09',
			extent: [-20037726.37, -11708041.66, 20037726.37, 12474104.17],
			units: 'm',
			axisOrientation: 'neu',
			global: false,
		});
		ol.proj.addProjection(projectionBD09);
		ol.proj.addCoordinateTransforms('EPSG:4326', 'BD:09', coordinate => {
			return lngLatToMercator(coordinate);
		}, (coordinate => {
			return mercatorToLngLat(coordinate);
		}));
		const projectionExtentInBD09 = projectionBD09.getExtent();

		const resolutions = [];
		let matrixIds = [];
		const maxZoom = 18;
		const minZoom = 8;

		const tileGrid = new ol.tilegrid.TileGrid({
			origin: [0, 0],
			resolutions: baiduMercator.resolutions(),
			extent: ol.extent.applyTransform(extent4326, projTransform.ll2bmerc),
			// matrixIds
			tileSize: [256, 256],
		});

		const baiduSource = new ol.source.TileImage({
			projection: 'BD:09',
			tileGrid: tileGrid,
			tileUrlFunction: (tileCoord) => {
				if (!tileCoord) {
					return "";
				}
				let z = tileCoord[0];
				let x = tileCoord[1];
				let y = -tileCoord[2] - 1;

				if (x < 0) {
					x = "M" + -x;
				}
				if (y < 0) {
					y = "M" + -y;
				}
				return `http://192.168.109.101:9998/scgis/roadmap?level=${z}&col=${x}&row=${y}`;

				// let [z, x, y] = tileCoord;
				// return `http://192.168.109.101:9998/scgis/roadmap?level=${z}&col=${x}&row=${-y}`;

			},
		});
		// 百度地图层
		const baiduMapLayer = new ol.layer.Tile({
			source: baiduSource,
			tilePixelRatio: 2,
		});
		const centerPoint = [116.403964,39.915119];

		const iconFeature = new ol.Feature({
			geometry: new ol.geom.Point(centerPoint),
		});

		const iconStyle = new ol.style.Style({
			image: new ol.style.Icon(
				/** @type {olx.style.IconOptions} */ ({
					anchor: [10, 26],
					anchorXUnits: 'pixels',
					anchorYUnits: 'pixels',
					src: '../image/position_orange.png',
				}),
			),
		});

		iconFeature.setStyle(iconStyle);

		const vectorSource = new ol.source.Vector({
			features: [iconFeature],
		});

		const iconLayer = new ol.layer.Vector({
			source: vectorSource,
		});

		const map = new ol.Map({
			layers: [
				baiduMapLayer,
				iconLayer,
			],
			target: 'map',
			view: new ol.View({
				center: centerPoint,
				projection: 'EPSG:4326',
				zoom: 12,
				maxZoom: 18,
				minZoom: 11,
				// resolutions,
			}),
		});
	};
</script>
</html>
